<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript">
        var socket =new WebSocket("ws://10.226.172.134:8081/forum-web/websocket.ws");
        var hasAddTrack = false;


        pc = new RTCPeerConnection({
            iceServers: [     // Information about ICE servers - Use your own!
                {
                    urls: "turn:" + myHostname,  // A TURN server
                    username: "webrtc",
                    credential: "turnserver"
                }
            ]
        });
        // Do we have addTrack()? If not, we will use streams instead.

//        hasAddTrack = (myPeerConnection.addTrack !== undefined);


        var tstream ={
            //audio:true,
            video:{mandatory: {maxWidth: 352,maxHeight: 320,maxFrameRate: 10}}
        };
        var  locatstream =null;
        var servers ={iceServers:[]};

        socket.onopen = function(evt){
            console.log("open");
        };
        socket.onclose=function(evt){
            console.log(evt);
        };
        //浏览器兼容  获取摄像头
        navigator.getUserMedia=(navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia);
        //建立流通道的兼容方法
//        var PeerConnection =(window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.RTCPeerConnection || undefined);
        var RTCSessionDescription = (window.webkitRTCSessionDescription || window.mozRTCSessionDescription || window.RTCSessionDescription || undefined);
        var pc ;
        //将流绑定到Video上
        navigator.getUserMedia(tstream,getUserStream,function error(error){console.log(error);});
        function getUserStream(stream){
            //将流绑定到video上
            document.getElementById("vid1").src=window.URL.createObjectURL(stream);
            locatstream =stream;

        };

        //发送连接消息

        function con(){

//            pc = new PeerConnection(servers);

            hasAddTrack = (pc.addTrack !== undefined);
            pc.onicecandidate = handleICECandidateEvent;
//            pc.onnremovestream = handleRemoveStreamEvent;
//            pc.oniceconnectionstatechange = handleICEConnectionStateChangeEvent;
//            pc.onicegatheringstatechange = handleICEGatheringStateChangeEvent;
//            pc.onsignalingstatechange = handleSignalingStateChangeEvent;
//            pc.onnegotiationneeded = handleNegotiationNeededEvent;
            if (hasAddTrack) {
                pc.ontrack = handleTrackEvent;
            } else {
                pc.onaddstream = handleAddStreamEvent;
            }
//            console.log("已将流装载");
//            pc.addStream(locatstream);
//            pc.onaddstream=function(e){
//                console.log(e.stream);
//                document.getElementById("vid2").src=window.URL.createObjectURL(e.stream);
//                console.log("获取远程媒体成功");
//            };
//            pc.onicecandidate =function(event){
//                socket.send(JSON.stringify({
//                    'type':"icecandidate",
//                    'state':"con",
//                    'data':{'candidate':event.candidate}}));
//            };
//            console.log("发送icecandidate");
//
//            pc.createOffer(function(offer){
//                pc.setLocalDescription(offer);
//                var obj =JSON.stringify({
//                    'type':"offer",
//                    'state':"con",
//                    'data':offer
//                });
//                socket.send(obj);
//                console.log("发送offer");
//            });

        };


        function handleTrackEvent(event) {
            log("*** Track event");
            document.getElementById("vid1").srcObject = event.streams[0];
        }
        function handleAddStreamEvent(event) {
            log("*** Stream added");
            document.getElementById("vid1").srcObject = event.stream;
        }
        function handleICECandidateEvent(event) {
            if (event.candidate) {
                log("Outgoing ICE candidate: " + event.candidate.candidate);
                socket.send(JSON.stringify({
                    'type':"icecandidate",
                    'state':"con",
                    'data':{'candidate':event.candidate}}));
//                sendToServer({
//                    type: "new-ice-candidate",
//                    target: targetUsername,
//                    candidate: event.candidate
//                });
            }
        }
        socket.onmessage= function(Message){
            var obj = JSON.parse(Message.data);
            var type =obj.type;
            switch(type){
                case "offer":
                    console.log("1获得offer");
                    pc = new PeerConnection(servers);
                    var rtcs =new  RTCSessionDescription(obj.data);
                    pc.setRemoteDescription(rtcs);
                    pc.onicecandidate =function(event){
                        socket.send(JSON.stringify({
                            'type':"icecandidate",
                            'state':"con",
                            'data':{'candidate':event.candidate}}));
                    };
                    console.log("1已将流装载");
                    pc.addStream(locatstream);
                    pc.onaddstream=function(e){
                        console.log(e.stream);
                        document.getElementById("vid2").src=window.URL.createObjectURL(e.stream);
                        console.log("1获取远程媒体成功");
                    }
                    pc.createAnswer(function(desc){
                        console.log(desc);
                        console.log("1发送answer");
                        pc.setLocalDescription(desc);
                        socket.send(JSON.stringify({
                            'type':"answer",
                            'state':"con",
                            'data':desc
                        }));
                        console.log("aa");
                    });

                    break;
                case "answer":
                    var rtcs =new RTCSessionDescription(obj.data);
                    console.log("1获得answer");
                    pc.setRemoteDescription(rtcs);
                    break;
                case"icecandidate":
                    console.log("1获得icecandidate");
                    console.log(obj.data.candidate);
                    pc.addIceCandidate(new RTCIceCandidate(obj.data.candidate));
                    break;
                default:
                    console.log(Message.data);

            }
        }

        function send(){
            socket.send("hello");
        }

    </script>
</head>

<body>
<div>
    <video id="vid1" width="640" height="480" autoplay></video>
    <video id="vid2" width="640" height="480" autoplay></video>
</div>
<div algin="center">
    <input type ="button" value="开始" onclick="con()"/>
    <input type ="button" value="发送" onclick="send()"/>
</div>
</body>
</html>
